<template>
	<view class="bill_info_box" v-if="billInfo?.time">
		<view class="bill_info_type_icon" v-if="!isShowBillInfo">
			<view class="info_icon">
				<Avatar radius="0rpx" size="50rpx" :fileName="billInfo.billType.billIcon" :joinUrlFun="joinSystemPath"/>
			</view>
			<view class="info_type_name text_ellipsis">
				{{billInfo.billType.billType_name}}
			</view>
		</view>
		<view :class="['info_money','text_ellipsis',{'info_money_add' :billInfo.in_out_type === BillInOutType.IN}]">
			{{billInfo.in_out_type === BillInOutType.IN ? `+${billInfo.money}` : `-${billInfo.money}`}}
		</view>
		<view class="info_footer">
			<view class="info_item">
				<view class="info_title">
					时间
				</view>
				<view class="info_data text_ellipsis">
					{{deleteLot(billInfo.time)}}
				</view>
			</view>
			<view class="info_item" v-if="!isShowBillInfo">
				<view class="info_title">
					来自
				</view>
				<view class="info_data">
					<view class="info_avatar">
						<Avatar radius="50rpx" size="50rpx" :fileName="billInfo.user.user_avatar"/>
					</view>
					<view class="info_user_name text_ellipsis">
						{{billInfo.user.nick_name_by_dormitory}}
					</view>
				</view>
			</view>
			<view class="info_item" v-if="!isShowBillInfo">
				<view class="info_title">
					账单
				</view>
				<view class="info_data">
					{{changeStrHidden(billInfo.id,6)}}
				</view>
			</view>
			<view class="info_item">
				<view class="info_title">
					备注
				</view>
				<view class="info_data">
					{{billInfo.info}}
				</view>
			</view>
			<view class="info_item info_item_orther" v-if="billInfo.proof_url">
				<view class="info_title_by_orther">
					凭证
				</view>
				<view class="info_title">
				</view>
				<view class="info_data_img">
					<template v-for="item in billInfo.proof_url.split(',')">
						<Avatar
							:fileName="item" 
							:isAllowPreview="true"
							radius="10rpx"
							:joinUrlFun="joinBillProof"
							size="200rpx"
							v-if="item"
							:key="item"
							/>						
					</template>
				</view>
			</view>
		</view>
		<view 
			class="info_handle"
			v-if="!isShowBillInfo && billInfo.user.user_id === user_store.userInfo.id"
		>
			<MyButton :clickFun="deleteFun" :bgc="primary_hot_color" fontSize="30rpx" width="250rpx" height="90rpx">
				删除
				<template #icon>
					<MyIcons size="40rpx" :src="joinSystemPath('delete.png')"/>
				</template>
			</MyButton>
			<MyButton :clickFun="editorFun" fontSize="30rpx" width="250rpx" height="90rpx">
				编辑
				<template #icon>
					<MyIcons size="40rpx" :src="joinSystemPath('editor.png')"/>
				</template>
			</MyButton>
		</view>
	</view>
</template>

<script setup>
	import {
		joinSystemPath,
		joinBillProof
	} from '@/utils/imgJoinName.js'
	import {
		deleteLot,
		changeStrHidden
	} from '@/utils/changeData.js'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {BillInOutType} from '@/enum/GlobalEnum.js'
	
	import Avatar from '@/components/Avatar/Avatar.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	
	const dynamicStyle_store = dynamicStyleStore()
	const user_store = userStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		shallow_text_color,
		primary_text_hot_color,
		primary_hot_color,
		primary_text_color
	} = dynamicStyle_store.dormitoryStyle
	
	const props=defineProps({
		billInfo:{
			type:Object
		},
		isShowBillInfo:{
			type:Boolean,
			default:false
		},
		width:{
			type:String,
			default:'calc(90vw)'
		}
	})
	const emits = defineEmits(['deleteBillEmit','editorBillEmit'])
	const deleteFun=()=>{
		emits('deleteBillEmit')
	}
	const editorFun=()=>{
		emits('editorBillEmit')
	}
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.bill_info_box{
		width: v-bind(width);
		margin: 0 auto;
		.bill_info_type_icon{
			display: flex;
			justify-content: center;
			align-items: center;
			.info_type_name{
				max-width: 50%;
				margin-left: 10rpx;
			}
		}
		.info_money{
			font-size: 60rpx;
			text-align: center;
			margin: 20rpx 0;
			color: v-bind(primary_text_color);
		}
		.info_money_add{
			color: v-bind(primary_text_hot_color);
		}
		.info_footer{
			padding: 0 10rpx;
			.info_item_orther{
				position: relative !important;
				margin-bottom: 20rpx !important;
				.info_title_by_orther{
					position: absolute !important;
					top: 0 !important;
					color: v-bind(shallow_text_color);
				}
			}
			.info_item{
				display: flex;
				align-items: center;
				margin: 10rpx 0;
				font-size: 30rpx;
				.info_title{
					margin-right: 20rpx;
					width: 14%;
					color: v-bind(shallow_text_color);
				}
				.info_data_img{
					width: 78%;
					display: grid;
					grid-template-columns: repeat(2,1fr);
					gap:20rpx;
					color: v-bind(primary_text_color);
					.info_user_name{
						width: 78%;
						margin-left: 10rpx;
					}
				}
				.info_data{
					width: 78%;
					display: flex;
					align-items: center;
					color: v-bind(primary_text_color);
					.info_user_name{
						width: 78%;
						margin-left: 10rpx;
					}
				}
			}
		}
		.info_handle{
			display: flex;
			justify-content: space-around;
			margin: 30rpx;
		}
	}
</style>